/* eslint-disable react/prop-types */

import React, {
  Component,
} from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-modal';

export default class ConfirmDialog extends Component {
  constructor(props) {
    super(props);
    this.close = this.close.bind(this);
    this.state = {
      modalVisibility: this.props.modalVisibility || false,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      modalVisibility: nextProps.modalVisibility,
    });
  }

  close() {
    if (this.props.onModalClose) {
      this.props.onModalClose();
    }
  }

  render() {
    return (
      <div className="confirm-dialog">
        <Modal
          isOpen={this.state.modalVisibility}
          contentLabel="hy-confirm-dlg"
          className={{
            base: 'confirm-dlg-base',
            afterOpen: 'confirm-dlg-open',
            beforeClose: 'confirm-dlg-close',
          }}
          overlayClassName={{
            base: 'confirm-overlay-base',
            afterOpen: 'confirm-overlay-open',
            beforeClose: 'confirm-overlay-close',
          }}
        >
          <div className="confirm-body">
            <div className="title">{this.props.title}</div>
            <p className="body">{this.props.body}</p>
            <p>
              <button className="submit" onClick={this.props.onSubmit}>{this.props.okText}</button>
              <button className="cancel" onClick={this.close}>{this.props.cancelText}</button>
            </p>
            <p className="modal-footer">{this.props.footer}</p>
            <span onClick={this.close} className="close" />
          </div>
        </Modal>
      </div>
    );
  }
}

ConfirmDialog.propTypes = {
  title: PropTypes.string,
  body: PropTypes.string,
  footer: PropTypes.string,
  isOpen: PropTypes.bool,
  onSubmit: PropTypes.func,
};
